<!DOCTYPE html>
<html>
<head>
<title>Relativity Frames Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    background-color: #ffffff;
    border: 1px solid #cccccc;
  }
</style>
</head>
<body>
<canvas id="relativityCanvas" width="600" height="450"></canvas>
<script>
  const canvas = document.getElementById('relativityCanvas');
  const ctx = canvas.getContext('2d');

  // Helper function to draw an arrow on a line
  function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10; // length of head in pixels
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    // Arrowhead
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
  }

  // --- Drawing Parameters ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 1.5;

  // --- Coordinates ---
  const O_x = 100, O_y = 350;
  const O_prime_x = 250, O_prime_y = 350;
  const O_double_prime_x = 250, O_double_prime_y = 200;
  const x_axis_end = 550;
  const y_axis_end = 50;
  
  // Font settings
  const labelFont = 'italic 24px "Times New Roman"';
  const textFont = '24px "Times New Roman"';

  // --- Draw All Axes ---
  ctx.beginPath();
  // S frame x-axis
  drawArrow(ctx, O_x, O_y, x_axis_end, O_y);
  // S frame y-axis
  drawArrow(ctx, O_x, O_y, O_x, y_axis_end);
  // S' and S'' y-axis (collinear)
  drawArrow(ctx, O_prime_x, O_prime_y, O_prime_x, y_axis_end);
  // S'' frame x-axis
  drawArrow(ctx, O_double_prime_x, O_double_prime_y, x_axis_end, O_double_prime_y);
  ctx.stroke();

  // --- Draw Labels ---
  // S frame labels
  ctx.font = labelFont;
  ctx.fillText('O', O_x - 30, O_y + 20);
  ctx.fillText('y', O_x - 5, y_axis_end - 15);
  ctx.fillText('x', x_axis_end + 10, O_y + 8);
  ctx.font = textFont;
  ctx.fillText('S系', O_x + 30, O_y - 120);

  // S' frame labels
  ctx.font = labelFont;
  ctx.fillText("O'", O_prime_x - 15, O_prime_y + 25);
  ctx.fillText("y'", O_prime_x - 35, O_double_prime_y + 50);
  ctx.fillText("x'", x_axis_end + 10, O_y + 30);
  ctx.font = textFont;
  ctx.fillText("S'系", O_double_prime_x + 20, O_double_prime_y + 80);

  // S'' frame labels
  ctx.font = labelFont;
  ctx.fillText('O"', O_double_prime_x - 35, O_double_prime_y + 10);
  ctx.fillText('y"', O_double_prime_x - 35, y_axis_end + 20);
  ctx.fillText('x"', x_axis_end + 10, O_double_prime_y + 8);
  ctx.font = textFont;
  ctx.fillText('S"系', O_double_prime_x + 20, O_double_prime_y - 20);

  // --- Draw Velocity Vectors ---
  ctx.lineWidth = 1.2;
  ctx.font = labelFont;
  
  // Vertical velocity v
  const v_vert_x = 320;
  ctx.beginPath();
  drawArrow(ctx, v_vert_x, 140, v_vert_x, 90);
  ctx.stroke();
  ctx.fillText('v', v_vert_x + 10, 115);
  
  // Horizontal velocity v
  const v_horz_y = 325;
  ctx.beginPath();
  drawArrow(ctx, 400, v_horz_y, 450, v_horz_y);
  ctx.stroke();
  ctx.fillText('v', 420, v_horz_y - 10);

</script>
</body>
</html>